<template>
    <div id="mystate">
        <!-- 使用vuex中的count -->
        <p>数字:{{$store.state.count}}</p>
        <h2>data中的数据:{{num}}</h2>
        <!-- <h3>mapState:{{count}}</h3>
        <h3>mapState-user:{{user}}</h3> -->

        <p>cuser: {{cuser}}</p>
        <p>csuser: {{csuser}}</p>
        <p>num: {{cnum}}</p>
    </div>
</template>

<script>
    //1、引入
    import {mapState} from 'vuex'

    export default {
        data(){
            return{
                num:this.$store.state.count,
                price:10
            }
        },
        // computed:{
        //     cnum(){
        //         return this.$store.state.count
        //     },
        //     cuser(){
        //         return this.$store.state.user
        //     }
        // }
        //2、通过mapState辅助函数,帮我们自动生成计算属性
        // computed:mapState([//普通使用
        //     //属性名与vuex状态名相同 可使用数组的形式写
        //     "count",//将vuex中状态count映射到计算属性中(this.$store.count)
        //     "user"
        // ])

        //以对象的形式使用
        // computed:mapState({
        //     cuser(state){
        //         //通过计算属性的第一个函数 是vuex中的状态state，所以可以通过state直接获取数据
        //         return state.user
        //     },
        //     //简写方式
        //     csuser:state => state.user,
        //     cnum:"count"
        // })
        computed:{
            //组件自己的计算属性
            cPrice(){
                return "$" + this.price
            },
            //使用对象展开运算符...解构
            ...mapState({
                cuser(state){
                    //通过计算属性的第一个函数 是vuex中的状态state，所以可以通过state直接获取数据
                    return state.user
                },
                //简写方式
                csuser:state => state.user,
                cnum:"count"
            })

        }
    }
</script>

<style>
    #mystate{
        border: 1px solid red;
    }
</style>